<template>
  <div>
    <div v-if="activeData.textConfig">
      <el-form-item :label="$t('formgen.sign.signPadTipsLabel')">
        <el-input
          v-model="activeData.textConfig.tips"
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('formgen.sign.cleanBtnTextLabel')">
        <el-input v-model="activeData.textConfig.clearBtnText" />
      </el-form-item>
      <el-form-item :label="$t('formgen.sign.confirmBtnTextLabel')">
        <el-input v-model="activeData.textConfig.confirmBtnText" />
      </el-form-item>
      <el-form-item :label="$t('formgen.sign.withdrawBtnTextLabel')">
        <el-input v-model="activeData.textConfig.backBtnText" />
      </el-form-item>
      <el-form-item :label="$t('formgen.sign.resignBtnTextLabel')">
        <el-input v-model="activeData.textConfig.reSignBtnText" />
      </el-form-item>
      <el-form-item
        :label="$t('formgen.sign.drawBtnTextLabel')"
        v-if="undefined !== activeData.textConfig.drawBtnText"
      >
        <el-input v-model="activeData.textConfig.drawBtnText" />
      </el-form-item>
      <el-form-item
        :label="$t('formgen.sign.eraserBtnTextLabel')"
        v-if="undefined !== activeData.textConfig.eraserBtnText"
      >
        <el-input v-model="activeData.textConfig.eraserBtnText" />
      </el-form-item>
    </div>
    <el-form-item
      :label="$t('formgen.sign.backgroundImg')"
      v-if="activeData.backgroundImg !== undefined"
    >
      <div>
        <div v-if="activeData.backgroundImg">
          <el-image
            style="height: 80px"
            :src="activeData.backgroundImg"
            :preview-src-list="[activeData.backgroundImg]"
          />
        </div>
        <el-upload
          :action="getUploadUrl()"
          :headers="getUploadHeader()"
          :on-success="handleUploadSuccess"
          :show-file-list="false"
        >
          <template #trigger>
            <el-button type="primary">{{ $t("formgen.sign.upload") }}</el-button>
          </template>
        </el-upload>
      </div>
    </el-form-item>
  </div>
</template>
<script lang="ts">
export default {
  name: "ConfigItemSignPad"
};
</script>
<script setup lang="ts">
import { getUploadHeader, getUploadUrl } from "@/utils/uploadFile";
import { defineProps } from "vue";

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {}
  }
});

const handleUploadSuccess = (res: any) => {
  if (res.data) {
    props.activeData.backgroundImg = res.data;
  }
};
</script>
<style lang="scss" scoped></style>
